/* 防止图片闪一下 */
image{will-change: transform}
/* scroll-view */
.scroll-row{ width: 100%;white-space: nowrap; }
.scroll-row-item{ display: inline-block; }

:root{
	--main:#9C2F2B;;
    /*引用的时候var(--main)*/
	--light_c: #BDD7EE;
	--holder_color: #dadada;
    --myred:#fe4701;
    --myblue:#043f7b;
    --myyellow:#FC8E00;
}

.cc1{background-color: #da251c;}
.cf1{color: #da251c}
.cb22{background-color: #222222}
.cb66{background-color: #666666}
.cf22{color: #222222}
.cf66{color: #666666}

/* 初始化标签在所有浏览器中的margin、padding值 */
    body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button,img{padding: 0; margin: 0;}
    /* 短引用的内容可取值：''或"" */
    blockquote:before, blockquote:after,q:before, q:after{content:'';content:none} /* 重置嵌套引用*/
    /* 缩写，图片等无边框 */
    fieldset,img,abbr,acronym{border: 0 none;} /* 重置fieldset（表单分组）、图片的边框为0*/
    abbr,acronym{font-variant: normal;}
    legend{color:#000;}
    blockquote, q{quotes: none} /* 重置嵌套引用的引号类型 */
    /* 清除特殊标记的字体和字号 */
    address,caption,cite,code,dfn,em,strong,th,var{font-weight: normal; font-style: normal;} /* 重置样式标签的样式 */
    /* 上下标 */
    /* 统一上标和下标 */
    sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}
    sup{top:-0.5em; }
    sub{bottom:-0.25em;}
    /* 设置表格的边框被合并为一个单一的边框, 指定分隔边框模型中单元格边界之间的距离为0*/
    /* 表格标题及内容居左显示 */
    caption{display:none;} /* 重置表格标题为隐藏 */
    caption,th{text-align: left;}
    /* 清除列表样式 */
    dl,ul,ol,menu,li{list-style:none} /* 重置类表前导符号为onne,menu在HTML5中有效 */
    input,button,textarea,select,optgroup,option{font-family:inherit; font-size:inherit; font-style:inherit; font-weight:inherit;}/* 输入控件字体 */
    input,select,textarea,button{vertical-align:middle;outline:none;} /* 重置表单控件垂直居中*/
    textarea{resize:none}
    input[type="submit"]{cursor: pointer;}/* 鼠标样式 */
    button{border:0 none;background-color:transparent;cursor:pointer} /* 重置表单button按钮效果 */
    input::-moz-focus-inner{border: 0; padding: 0;}

    /* 标题元素样式清除, 让标题都自定义, 适应多个系统应用 */
    h1,h2,h3,h4,h5,h6{font-size: 100%;font-weight: normal;}
    /* 链接样式，颜色可酌情修改 */
    a:link {text-decoration: none!important;}/* 未访问的链接 */
    a:visited {text-decoration: none!important;}/* 已访问的链接 */
    a:hover {text-decoration: none!important;}/* 鼠标移动到链接上 */
    a:active {text-decoration: none!important;}/* 选定的链接 */
    del,ins,a{text-decoration: none!important;}
    a:hover,a:active,a:focus{ text-decoration: none!important;} /* 取消a标签点击后的虚线框 */
    a:active{star:expression(this.onFocus=this.blur());} /* 设置页面文字等在拖动鼠标选中情况下的背景色与文字颜色 */
    a{outline: none;transition: color 0.2s ease 0s;}/*CSS3链接秒数缓冲效果2秒*/

    .none {
        display: none !important;
    }
    a:link, a:visited, a:hover, a:active {
        /*color: inherit;*/
    }


.bor_red{border: 1px solid red;}
.bor_red2{border: 4px solid red;}
.bor_red3{border: 8px solid red;}
.bor_green{border: 1px solid green;}
.bor_green2{border: 4px solid green;}
.bor_green3{border: 8px solid green;}
.bor_black{border: 1px solid black;}
.bor_black2{border: 4px solid black;}
.bor_black3{border: 8px solid black;}
.bor_blue{border: 1px solid blue;}
.bor_blue2{border: 4px solid blue;}
.bor_blue3{border: 8px solid blue;}


.bac_red{background-color: #800000   }
.bac_red2{background-color: #B22222 }
.bac_red3{background-color: #FF4500 }
.bac_red4{background-color: #FF69B4  }
.bac_yellow{background-color: #FFA500 }
.bac_yellow2{background-color: #DAA520 }
.bac_yellow3{background-color: #FFD700 }
.bac_yellow4{background-color: #FFFF00 }
.bac_blue{background-color: #0000CD }
.bac_blue2{background-color: #4169E1 }
.bac_blue3{background-color: #6495ED }
.bac_blue4{background-color: #87CEEB  }
.bac_green{background-color: #228B22 }
.bac_green2{background-color: #32CD32 }
.bac_green3{background-color: #66ff50}
.bac_green4{background-color: #ADFF2F }
.bac_pink{background-color: #8A2BE2 }
.bac_pink2{background-color: #9370DB }
.bac_pink3{background-color: #DA70D6 }
.bac_pink4{background-color: #DDA0DD }
.bac_gray{background-color: #808080 }
.bac_gray2{background-color: #A9A9A9 }
.bac_gray3{background-color: #D3D3D3 }
.bac_gray4{background-color: #e9e9e9}
.bac_black{background-color: black}
.bac_white{background-color: white}
.bac_cyan{background-color: #00e9e9}
.bac_cyan2{background-color: #17fff9}
.bac_cyan3{background-color: #8dfffd}
.bac_cyan4{background-color: #d8fffd}

.img100{width:100%;height:100%;}

.bor_box{box-sizing: border-box;}
.z_100{z-index: 100;}
.z_50{z-index: 50;}
.point{cursor:pointer}

/* 阴影 */
.shadow-1 {
    box-shadow: 4px 4px 8px rgba(114, 130, 138, 0.2)!important;
}
.shadow-2 {
    box-shadow: 8px 8px 16px rgba(114, 130, 138, 0.2)!important;
}
.shadow-3 {
    box-shadow: 12px 12px 48px rgba(114, 130, 138, 0.2)!important;
}
.shadow-4 {
    box-shadow: 0 0 40px rgba(114, 130, 138, 0.8)!important;
}
/* 定位 */
.position-absolute{ position: absolute; }
.position-fixed{ position: fixed; }
.position-relative{ position: relative; }
.left-0{ left: 0; }
.top-0{ top: 0; }
.bottom-0{ bottom: 0; }
.right-0{ right: 0; }
/* 宽高 */
.w-100{ width: 100%;}
.w-50{ width: 50%;}
/* 字体 */


.line-through{ text-decoration: line-through; }

.text-center{ text-align: center; }
.text-left{ text-align: left; }
.text-right{ text-align: right; }


/* flex布局 */
.d-flex{ display: flex; }
.d-block{ display: block; }
.d-inline-block{ display: inline-block; }

.row_start_start{display: flex;flex-direction: row;justify-content:flex-start;align-items: start;}
.row_start_end{display: flex;flex-direction: row;justify-content:flex-start;align-items: end;}
.row_start_center{display: flex;flex-direction: row;justify-content:flex-start;align-items: center;}

.row_end_start{display: flex;flex-direction: row;justify-content:flex-end;align-items: start;}
.row_end_end{display: flex;flex-direction: row;justify-content:flex-end;align-items: end;}
.row_end_center{display: flex;flex-direction: row;justify-content:flex-end;align-items: center;}

.row_between_start{display: flex;flex-direction: row;justify-content:space-between;align-items: start;}
.row_between_end{display: flex;flex-direction: row;justify-content:space-between;align-items: end;}
.row_between_center{display: flex;flex-direction: row;justify-content:space-between;align-items: center;}

.row_around_start{display: flex;flex-direction: row;justify-content:space-around;align-items: start;}
.row_around_end{display: flex;flex-direction: row;justify-content:space-around;align-items: end;}
.row_around_center{display: flex;flex-direction: row;justify-content:space-around;align-items: center;}

.row_center_start{display: flex;flex-direction: row;justify-content:center;align-items: start;}
.row_center_end{display: flex;flex-direction: row;justify-content:center;align-items: end;}
.row_center_center{display: flex;flex-direction: row;justify-content:center;align-items: center;}

.col_start_start{display: flex;flex-direction: column;justify-content:flex-start;align-items: start;}
.col_start_end{display: flex;flex-direction: column;justify-content:flex-start;align-items: end;}
.col_start_center{display: flex;flex-direction: column;justify-content:flex-start;align-items: center;}

.col_end_start{display: flex;flex-direction: column;justify-content:flex-end;align-items: start;}
.col_end_end{display: flex;flex-direction: column;justify-content:flex-end;align-items: end;}
.col_end_center{display: flex;flex-direction: column;justify-content:flex-end;align-items: center;}

.col_between_start{display: flex;flex-direction: column;justify-content:space-between;align-items: start;}
.col_between_end{display: flex;flex-direction: column;justify-content:space-between;align-items: end;}
.col_between_center{display: flex;flex-direction: column;justify-content:space-between;align-items: center;}

.col_around_start{display: flex;flex-direction: column;justify-content:space-around;align-items: start;}
.col_around_end{display: flex;flex-direction: column;justify-content:space-around;align-items: end;}
.col_around_center{display: flex;flex-direction: column;justify-content:space-around;align-items: center;}

.col_center_start{display: flex;flex-direction: column;justify-content:center;align-items: start;}
.col_center_end{display: flex;flex-direction: column;justify-content:center;align-items: end;}
.col_center_center{display: flex;flex-direction: column;justify-content:center;align-items: center;}

.flex_wrap{flex-wrap: wrap;}
.flex_no_wrap{flex-wrap: nowrap;}


.flex-grow1{flex-grow: 1;}
.flex-grow2{flex-grow: 2;}
.flex-grow3{flex-grow: 3;}
.flex-1{ flex: 1; }

.flex-wrap{ flex-wrap: wrap; }
.flex-nowrap{ flex-wrap: nowrap; }
.flex-shrink{flex-shrink: 0;}

.a-self-start{ align-self: flex-start; }
.a-self-auto{ align-self: auto; }
.a-self-end{ align-self: flex-end; }
.a-self-stretch{ align-self:stretch; }
.a-self-baseline{ align-self:baseline; }
/* Border */




/* Spacing */
.m-0 { margin-left: 0;margin-right: 0;margin-top: 0;margin-bottom: 0;}
.m { margin-left: 5px;margin-right: 5px;margin-top: 5px;margin-bottom: 5px;}
.m-1 { margin-left: 10px;margin-right: 10px;margin-top: 10px;margin-bottom: 10px;}
.m-2 { margin-left: 20px;margin-right: 20px;margin-top: 20px;margin-bottom: 20px;}
.m-3 { margin-left: 30px;margin-right: 30px;margin-top: 30px;margin-bottom: 30px;}
.m-4 { margin-left: 40px;margin-right: 40px;margin-top: 40px;margin-bottom: 40px;}
.m-5 { margin-left: 50px;margin-right: 50px;margin-top: 50px;margin-bottom: 50px;}

.mx-0 { margin-left: 0;margin-right: 0;}
.mx { margin-left: 5px;margin-right: 5px;}
.mx-1 { margin-left: 10px;margin-right: 10px;}
.mx-2 { margin-left: 20px;margin-right: 20px;}
.mx-3 { margin-left: 30px;margin-right: 30px;}
.mx-4 { margin-left: 40px;margin-right: 40px;}
.mx-5 { margin-left: 50px;margin-right: 50px;}

.my-0 { margin-top: 0;margin-bottom: 0;}
.my { margin-top: 5px;margin-bottom: 5px;}
.my-1 { margin-top: 10px;margin-bottom: 10px;}
.my-2 { margin-top: 20px;margin-bottom: 20px;}
.my-3 { margin-top: 30px;margin-bottom: 30px;}
.my-4 { margin-top: 40px;margin-bottom: 40px;}
.my-5 { margin-top: 50px;margin-bottom: 50px;}

.mt-0 { margin-top: 0;}
.mt { margin-top: 5px;}
.mt-auto { margin-top: auto;}
.mt-1 { margin-top: 10px;}
.mt-2 { margin-top: 20px;}
.mt-3 { margin-top: 30px;}
.mt-4 { margin-top: 40px;}
.mt-5 { margin-top: 50px;}

.mb-0 { margin-bottom: 0;}
.mb { margin-bottom: 5px;}
.mb-auto { margin-bottom: auto;}
.mb-1 { margin-bottom: 10px;}
.mb-2 { margin-bottom: 20px;}
.mb-3 { margin-bottom: 30px;}
.mb-4 { margin-bottom: 40px;}
.mb-5 { margin-bottom: 50px;}

.ml-0 { margin-left: 0;}
.ml { margin-left: 5px;}
.ml-auto { margin-left: auto;}
.ml-1 { margin-left: 10px;}
.ml-2 { margin-left: 20px;}
.ml-3 { margin-left: 30px;}
.ml-4 { margin-left: 40px;}
.ml-5 { margin-left: 50px;}

.mr-0 { margin-right: 0;}
.mr { margin-right: 5px;}
.mr-1 { margin-right: 10px;}
.mr-2 { margin-right: 20px;}
.mr-3 { margin-right: 30px;}
.mr-4 { margin-right: 40px;}
.mr-5 { margin-right: 50px;}

.box_border{box-sizing: border-box;}
.box_content{box-sizing: content-box}

.p-0 {padding-left: 0;padding-right: 0;padding-top: 0;padding-bottom: 0;}
.p {padding-left: 5px;padding-right: 5px;padding-top: 5px;padding-bottom:5px;}
.p-1 {padding-left: 10px;padding-right: 10px;padding-top: 10px;padding-bottom: 10px;}
.p-2 {padding-left: 20px;padding-right: 20px;padding-top: 20px;padding-bottom: 20px;}
.p-3 {padding-left: 30px;padding-right: 30px;padding-top: 30px;padding-bottom: 30px;}
.p-4 {padding-left: 40px;padding-right: 40px;padding-top: 40px;padding-bottom: 40px;}
.p-5 {padding-left: 50px;padding-right: 50px;padding-top: 50px;padding-bottom: 50px;}

.px-0 { padding-left: 0;padding-right: 0;}
.px { padding-left: 5px;padding-right: 5px;}
.px-1 { padding-left: 10px;padding-right: 10px;}
.px-2 { padding-left: 20px;padding-right: 20px;}
.px-3 { padding-left: 30px;padding-right: 30px;}
.px-4 { padding-left: 40px;padding-right: 40px;}
.px-5 { padding-left: 50px;padding-right: 50px;}

.py-0 { padding-top: 0;padding-bottom: 0;}
.py { padding-top: 5px;padding-bottom: 5px;}
.py-1 { padding-top: 10px;padding-bottom: 10px;}
.py-2 { padding-top: 20px;padding-bottom: 20px;}
.py-3 { padding-top: 30px;padding-bottom: 30px;}
.py-4 { padding-top: 40px;padding-bottom: 40px;}
.py-5 { padding-top: 50px;padding-bottom: 50px;}

.pt-0 { padding-top: 0;}
.pt { padding-top: 5px;}
.pt-1 { padding-top: 10px;}
.pt-2 { padding-top: 20px;}
.pt-3 { padding-top: 30px;}
.pt-4 { padding-top: 40px;}
.pt-5 { padding-top: 50px;}

.pb-0 { padding-bottom: 0;}
.pb { padding-bottom: 5px;}
.pb-1 { padding-bottom: 10px;}
.pb-2 { padding-bottom: 20px;}
.pb-3 { padding-bottom: 30px;}
.pb-4 { padding-bottom: 40px;}
.pb-5 { padding-bottom: 50px;}

.pl-0 { padding-left: 0;}
.pl { padding-left: 5px;}
.pl-1 { padding-left: 10px;}
.pl-2 { padding-left: 20px;}
.pl-3 { padding-left: 30px;}
.pl-4 { padding-left: 40px;}
.pl-5 { padding-left: 50px;}

.pr-0 { padding-right: 0;}
.pr { padding-right: 5px;}
.pr-1 { padding-right: 10px;}
.pr-2 { padding-right: 20px;}
.pr-3 { padding-right: 30px;}
.pr-4 { padding-right: 40px;}
.pr-5 { padding-right: 50px;}
